<template>
	<view class="container">
		<userInfo></userInfo>
		<view class="title">家庭经济状况登记表</view>
		<view class="bigTitle">家庭财产情况</view>
		<view class="lineOptionsBox">
			<view class="lineOptionsTitle">现金</view>
			<view class="lineOptionsRight">
				<view class="lineOptionsRightIn" @click="saveStatus('haveMoney',false)">
					<image class="chooseIcon" v-if="!haveMoney" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">没有</view>
				</view>
				<view class="lineOptionsRightIn lineOptionsRightIn2">
					<view class="iconBox" @click="saveStatus('haveMoney',true)">
						<image class="chooseIcon" v-if="haveMoney" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">有</view>
					</view>
					<view class="lineOptionsInputBox">
						<input v-if="haveMoney&&!isOpen" @input="checkInput($event,'money')" v-model="money" type="digit" class="lineOptionsInput">
						<block v-else>
							<view v-if="!haveMoney" class="lineOptionsInput">
								
							</view>
							<view v-else class="lineOptionsInput">
								{{money}}
							</view>
						</block>
						<view class="inputIcon">元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lineOptionsBox">
			<view class="lineOptionsTitle">银行存款</view>
			<view class="lineOptionsRight">
				<view class="lineOptionsRightIn" @click="saveStatus('haveSaveMoney',false)">
					<image class="chooseIcon" v-if="!haveSaveMoney" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">没有</view>
				</view>
				<view class="lineOptionsRightIn lineOptionsRightIn2">
					<view class="iconBox" @click="saveStatus('haveSaveMoney',true)">
						<image class="chooseIcon" v-if="haveSaveMoney" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">有</view>
					</view>
					<view class="lineOptionsInputBox">
						<input v-if="haveSaveMoney&&!isOpen" @input="checkInput($event,'saveMoney')" v-model="saveMoney" type="digit" class="lineOptionsInput">
						<block v-else>
							<view v-if="!haveSaveMoney" class="lineOptionsInput">
								
							</view>
							<view v-else class="lineOptionsInput">
								{{saveMoney}}
							</view>
						</block>
						<view class="inputIcon">元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lineOptionsBox2">
			<view class="lineOptionsTitle">股票基金等有价证券</view>
			<view class="lineOptionsRight lineOptionsRight2">
				<view class="lineOptionsRightIn" @click="saveStatus('haveCoupon',false)">
					<image class="chooseIcon" v-if="!haveCoupon" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">没有</view>
				</view>
				<view class="lineOptionsRightIn lineOptionsRightIn2">
					<view class="iconBox" @click="saveStatus('haveCoupon',true)">
						<image class="chooseIcon" v-if="haveCoupon" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">有，总市值</view>
					</view>
					<view class="lineOptionsInputBox">
						<input v-if="haveCoupon&&!isOpen" @input="checkInput($event,'coupon')" v-model="coupon" type="digit" class="lineOptionsInput">
						<block v-else>
							<view v-if="!haveCoupon" class="lineOptionsInput">
								
							</view>
							<view v-else class="lineOptionsInput">
								{{coupon}}
							</view>
						</block>
						<view class="inputIcon">元</view>
					</view>
				</view>
			</view>
		</view>
		
			
		<!-- <view class="button1" @click="save(false)">
			提交
		</view> -->
		<view class="button" v-if="isSave == '0'" @click="save(true)">
			下一步
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<otherList @openChange="isOpenChange"/>
	</view>
</template>

<script>
	import otherList from '@/pages/components/otherInfoList.vue'
	import userInfo from '@/pages/components/userInfo.vue'
	export default {
		components:{
			otherList,userInfo
		},
		data(){
			return {
				isOpen:false,
				user:{},
				obj:{},
				haveMoney:true, //是否有现金
				money:0,
				haveSaveMoney:true, //是否有存款
				saveMoney:0,
				haveCoupon:true, //是否有券
				coupon:0,
				isSave:'1',
				pageInfo:{
					pageName:'家庭财产情况1',
					pagePath:'/pages/kancha/familyMoneyInfo',
					pageIndex:7
				}
			}
		},
		onLoad() {
			this.isSave = uni.getStorageSync('isSave')
			this.user = uni.getStorageSync('user')
			this.getDetail()
		},
		methods:{
			checkInput(e,value) {
				setTimeout(()=>{
					this[value] = this.$verifyMoney(e.detail.value);
					console.log(value)
				},0)
			},
			// 表单验证
			verifyData(){
				// 验证现金
				if(this.haveMoney&&this.$verifyEmpty(this.money)){
					return {
						title:'现金不能为空',
						status:false
					}
				}
				// 验证银行存款
				console.log(this.saveMoney)
				if(this.haveSaveMoney&&this.$verifyEmpty(this.saveMoney)){
					return {
						title:'银行存款不能为空',
						status:false
					}
				}
				// 验证股票基金等有价证券
				if(this.haveCoupon&&this.$verifyEmpty(this.coupon)){
					return {
						title:'股票基金等有价证券并能为空',
						status:false
					}
				}
				return {
					title:'验证通过',
					status:true
				}
			},
			saveStatus(type,status){
				this[type]=status
				let str = type.replace('have','')
				str = str.slice(0,1).toLowerCase()+str.slice(1,str.length)
				if(status == false){
					this[str] = ""
					console.log(str)
				}
			},
			// 获取详情
			async getDetail(){
				let res = await this.$get('/app/bus/indexSituation?guaranteeNumber='+uni.getStorageSync('guaranteeNumber'),{})
				if(res.code == 200){
					let obj = res.data[0]
					this.obj = obj
					this.money = obj.cash||0
					this.saveMoney = obj.bankSavings||0
					this.coupon = obj.stock||0
					if(obj.cash/1 === 0){
						this.haveMoney = false
					}
					if(obj.bankSavings/1 === 0){
						this.haveSaveMoney = false
					}
					if(obj.stock/1 === 0){
						this.haveCoupon = false
					}
				}
			},
			async save(isLink){
				let result = this.verifyData()
				if(isLink){
					if(!result.status){
						uni.showModal({
							content: result.title,
							showCancel: false,
							confirmText: '确定'
						});
						return
					}
				}
				let data = {}
				data.cash = this.money
				data.bankSavings = this.saveMoney
				data.stock = this.coupon
				data.id = this.obj.id
				data.guaranteeNumber = uni.getStorageSync('guaranteeNumber')
				console.log(data)
				let res = await this.$post('/app/bus/updateSituation',data,false)
				if(res.code == 200){
					let pageStatus = uni.getStorageSync('pageStatus')
					if(result.status){
						pageStatus.familyMoneyInfo = {
							...this.pageInfo,
							status:true
						}
					} else {
						pageStatus.familyMoneyInfo = {
							...this.pageInfo,
							status:false
						}
					}
					uni.setStorageSync('pageStatus',pageStatus)
					if(isLink){
						this.link()
					} else {
						// uni.showToast({
						// 	title: '信息修改成功',
						// 	duration:2000
						// });
					}
				}
			},
			// 基本信息开关
			isOpenChange(e){
				this.isOpen = e
				if(e){
					this.save(false)
				}
			},
			link(){
				uni.redirectTo({
					url:'/pages/kancha/familyMoneyInfoOne'
				})
			}
		}
	}
</script>

<style scoped>
	.iconBox{
		display: flex;
		align-items: center;
	}
	.title{
		font-size: 36rpx;
		font-weight: 700;
		color:#fa5245;
		line-height:1;
		text-align:center;
		padding-bottom:20rpx;
		padding-top:50rpx;
	}
	.bigTitle{
		font-size:34rpx;
		text-align:center;
		margin-top:30rpx;
	}
	.lineOptionsBox{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		display:flex;
		align-items:center;
		height:86rpx;
		padding:0 40rpx;
		margin:0 auto;
		margin-top:30rpx;
		justify-content:space-between;
	}
	.lineOptionsBox2{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		padding:20rpx 40rpx;
		margin:0 auto;
		margin-top:30rpx;
	}
	.lineOptionsBox3{
		padding-left: 0;
	}
	.lineOptionsTitle,.inputIcon{
		color: #ccc;
	}
	.lineOptionsTitle1{
		padding-left: 40rpx;
	}
	.lineOptionsBox view,.lineOptionsBox input ,.lineOptionsBox2 input{
		font-size:26rpx;
	}
	.lineOptionsRight{
		display: flex;
		align-items:center;
	}
	.lineOptionsBox2 .lineOptionsRight{
		justify-content: space-between;
	}
	.lineOptionsRight1{
		flex: 1;
	}
	.lineOptionsRightIn{
		display: flex;
		align-items:center;
	}
	.lineOptionsRightIn2{
		margin-left: 50rpx;
	}
	.lineOptionsRightIn3{
		flex:1;
		margin-top: 20rpx;
	}
	.lineOptionsRightIn3 input{
		flex: 1;
	}
	.chooseIcon{
		width:28rpx;
		height:27rpx;
		margin-right: 20rpx;
	}
	.lineOptionsInputBox2{
		flex: 1;
	}
	.lineOptionsInputBox{
		width: 144rpx;
		display: flex;
		align-items:center;
		border-bottom:1rpx solid #333;
		margin-left:10rpx;
	}
	.lineOptionsInput{
		width: 100rpx;
		
	}
	.lineOptionsRight2{
		margin-top:20rpx;
	}
	.timeIcon{
		width:26rpx;
		height:25rpx;
		margin:0 10rpx;
	}
	.time{
		width: 100rpx;
		text-align: center;
	}
	.timeDes{
		color:#ccc
	}
	.sanjiao {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}
	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;
	
	}
	
	.bottom {
		height: 160rpx;
	}
	.zhongdian{
		color: red;
		width: 40rpx;
		text-align: center;
	}
	.optionsBoxRight{
		display: flex;
		align-items: center;
	}
	.optionsBoxRight1{
		flex:1;		
	}
	.optionsBoxRightIn{
		display: flex;
		align-items: center;
		flex:1;
	}
	.optionsBoxRightIn1{
		/* margin-right: 50rpx; */
	}
	.optionsTitle{
		display: flex;
		align-items: center;
	}
	.optionsTitleIn{
		color:#ccc;
		width: 180rpx;
	}
	.optionsBox{
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
	}
	.optionsBox1{
		margin-top: 40rpx;
	}
	.chooseIconFrist{
		margin-left: 50rpx;
	}
	.chooseIcon1{
		margin-left: 20rpx;
	}
	.pingfangmi{
		color: #ccc;
	}
	.pingfangmi text{
		display: inline-block;
		font-size: 18rpx;
		color:#ccc;
		position: relative;
		transform: translateY(-10rpx);
	}
	.bottomOptionsTitle1{
		width: 144rpx;
	}
	.lineOptionsInputBox1{
		flex:1;
	}
	.lineOptionsInputBox1 input{
		flex:1;
	}
	.button1{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:#656668;
		font-size:28rpx;
		color:white;
	}
	.button{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:linear-gradient(90deg,#fa5444,#ff988f);
		font-size:28rpx;
		color:white;
		
	}
	.zhenchayuan{
		font-size: 24rpx;
		color:#ccc;
		margin-top: 20rpx;
		text-align: center;
	}
	.bottom{
		height:160rpx;
	}
	.topTitleBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}
	.listTiteBox {
		position: relative;
	}
	
	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}
	.listTitle{
		font-size:38rpx;
		position: relative;
	}
	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.childrenBox{
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}
	.childrenOptionsBox{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.childrenOptionsTitle{
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}
	.childrenOptionsDes{
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.line1{
		height: 20rpx;
		background-color: #efefef;
	}
	.otherInfo{
		width: 200rpx;
		line-height:70rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top:460rpx;
		font-family: '黑体';
	}
</style>
